Ejemplo de validación de campos de entrada en un formulario usando ValidityState

Documentación ValidityState

<!DOCTYPE html>
<html>
  <head>

    <title>Document</title>
    <style>
      input:invalid {
        border: 2px dashed red;
      }

      input:valid {
        border: 2px solid black;
      }
    </style>
  </head>
  <body>
    <form>
      <label for="choose">Numero entre 4 y 20?</label>
      <input id="choose" type="number" min="4" max="20" required/> <button onclick="validar()">Submit</button>
    </form>

    <script>
      let numero = document.getElementById("choose");

      function validar() {
        if(numero.validity.rangeUnderflow)
          alert("por debajo")
        else if(numero.validity.rangeOverflow)
          alert("por encima")
      }
    </script>
  </body>
</html>

Validacion | Inputs

Validacion inputs